<template>
	<view class="container">
		<view class="van-nav-bar">
			<view class="van-nav-bar__content">
				<view class="van-nav-bar__left" @click="back()">
					<image src="/static/images/wyleft.png" mode="" style="width: 20px;height: 20px;"></image>
					<text style="color: #1989fa;">返回</text>
				</view>
			</view>
		</view>
		<view class="view-router">
			<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true"
				:circular="true" :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(imgUrl, index) in swiperList" :key="index">
					<image :src="imgUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="item_cell_group">
			<view class="van-cell">
				<view class="van-cell__value">
					<view>
						<text class="item_price">￥{{body.retailPrice}}.00</text>
						<text class="item_market_price">￥{{body.counterPrice}}.00</text>
					</view>
					<view class="item-title">
						{{body.name}}
					</view>
					<view class="item_intro">
						{{body.brief}}
					</view>
				</view>
			</view>
		</view>
		<view class="item_cell_group1">
			<view class="van-cell-group1">
				<view class="van-cell" @click="open()">
					<view class="van-cell__title">
						<text>规格</text>
					</view>
					<view class="van-cell__value" style="margin-right: 5px;">
						<text>请选择</text>
					</view>
					<image src="/static/images/wywyyou.png" mode=""></image>
				</view>
				<uni-popup ref="xqt" type="bottom" class="popup_one">
					<view class="van-sku-container">
						<view class="van-sku-header">
							<view class="van-image ">
								<image :src="body.picUrl" mode="" class="van-image__img" style="object-fit: cover;">
								</image>
							</view>
							<view class="van-sku-header__goods-info">
								<view class="van-sku__goods-price">
									<text class="van-sku__price-symbol">￥</text>
									<text class="van-sku__price-num">{{body.retailPrice}}.00</text>
								</view>
								<view class="van-sku-header-item">
									已选 {{list.value}}
								</view>
							</view>
						</view>
						<view class="van-sku-body" style="max-height: 732px;">
							<view class="van-sku-group-container">
								<view class="van-sku-row ">
									<view class="van-sku-row__title">
										规格
									</view>
									<text class="van-sku-row__item">
										<view class="van-sku-row__item-name">
											{{list.value}}
										</view>
									</text>
								</view>
							</view>
							<view class="van-sku-stepper-stock">
								<view class="van-sku__stepper-title">
									购买数量
								</view>
								<view class="van-stepper">
									<view class="minus" @click="decrement">-</view>
									<view class="num-value">{{count}}</view>
									<view class="plus" @click="increment">+</view>
								</view>
							</view>
						</view>
						<view class="van-sku-actions">
							<button class="van-button button_one" @click="add()">
								<view class="van-button__content" @click="close1()">
									<text>加入购物车</text>
								</view>
							</button>
							<button class="van-button button_two">
								<view class="van-button__content">
									<text>立即购买</text>
								</view>
							</button>
						</view>
					</view>
				</uni-popup>
				<view class="van-cell" @click="open2()">
					<view class="van-cell__title">
						<text>属性</text>
					</view>
					<image src="/static/images/wywyyou.png" mode=""></image>
				</view>
				<uni-popup ref="xqt2" type="bottom" class="popup_two">
					<view class="popup_wrap">
						<text class="cancel_popup" @click="close2()">X</text>
						<view class="popup_header">
							商品属性
						</view>
						<view class="popup_content">
							<view class="van-cell-group">
								<view class="van-cell">
									<view class="van-cell__value ">
										<view class="van-row" v-for="(item,index) in att " :key="index" >
											<view class="van-col van-col-8" style="padding: 10px 0;">
												{{item.attribute}}
											</view>
											<view class="van-col van-col-16" style="padding: 10px 0;">
												{{item.value}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-popup>
				<view class="van-cell">
					<view class="van-cell__title">
						<text>运费</text>
					</view>
					<view class="van-cell__value">
						<text>满88免运费</text>
					</view>
				</view>
			</view>
		</view>
		<view class="item_desc">
			<view class="item_desc_title">
				商品详情
			</view>
			<view style="text-align: center;" v-if="body.detail==''">
				<text>无详情</text>
			</view>
			<view v-html="body.detail" class="img">

			</view>
		</view>
		<view class="van-goods-action">
			<view class="van-goods-action-icon" @click="jumpS()">
				<view class="van-goods-action-icon__icon">
					<image src="/static/images/icon5.png" mode=""></image>
					<view class="van-info">
						{{num}}
					</view>
				</view>
			</view>
			<view class="van-goods-action-icon" @click="shoucang()">
				<view class="van-goods-action-icon__icon">

				</view>
			</view>
			<button class="van-button button_one" @click="open()">
				<view class="van-button__content">
					<text>加入购物车</text>
				</view>
			</button>
			<button class="van-button button_two" @click="open()">
				<view class="van-button__content">
					<text>立即购买</text>
				</view>
			</button>
		</view>
	</view>
</template>

<script>
	import api from '../../static/request'
	export default {
		data() {
			return {
				vals: '',
				swiperList: '',
				dotStyle: false,
				body: '',
				list: '',
				att:'',
				num:'',
				count:1,
				id:''
			}
		},
		methods: {
			add(){
				api.post('cart/add', {
					goodsId: this.vals, number: this.count, productId: this.id
				}).then(res => {
					console.log(res, '1e') 
					uni.showToast({
						title: '加入购物车成功',
						duration: 2000,
						icon: 'none',
					});  
				})
			},
			increment() {
			      this.count++;
			    },
			    decrement() {
			      if (this.count > 1) { // 防止数字减到0以下（根据需要调整）
			        this.count--;
			      } else {
			        return
			      }
				},
			shoucang(){ 
				api.post('collect/addordelete', {
					valueId: this.vals, type: 0
				}).then(res => {
					console.log(res, '1e') 
					uni.showToast({
						title: '收藏成功',
						duration: 2000,
						icon: 'none',
					});
				})
			},
			jumpS(){
				uni.switchTab({
					url: '/pages/serve/serve'
				});
			},
			open() {
				this.$refs.xqt.open()
			},
			back() {
				uni.navigateBack({
					delta: 1 // 表示返回的页面数，如果为1则返回上一页，如果大于1则返回上上一级页面
				});
			},
			close2() {
				this.$refs.xqt2.close()
			},
			close1() {
				this.$refs.xqt1.close()
			},
			open2() {
				this.$refs.xqt2.open()
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				api.get('goods/detail', {
					id: this.vals
				}).then(res => {
					console.log(res.data.data.productList[0].id, '1e')
					// 请求成功后隐藏加载提示
					uni.hideLoading();
					this.swiperList = res.data.data.info.gallery
					this.body = res.data.data.info
					this.att = res.data.data.attribute
					this.id = res.data.data.productList[0].id
					this.list = res.data.data.specificationList[0].valueList[0]
				})
			},
			getBasket() {
				uni.showLoading({
					title: '加载中'
				});
				api.get('cart/index', { 
					
				}).then(res => {
					console.log(res, '1basket')
					// 请求成功后隐藏加载提示
					uni.hideLoading(); 
					this.num=res.data.data.cartTotal.goodsCount
				})
			},
		},
		onShow() {
			this.getList()
			this.getBasket()
		},
		onLoad(options) {
			// 当存在 prodid 参数时，对其进行解码和解析
			const valStr = decodeURIComponent(options.prodid);
			const val = JSON.parse(valStr);
			this.vals = val;
		},
	}
</script>

<style>
	@import url('detail.css');
</style>